<template>
  <div id="background">
    <el-container>
      <el-header id="keBiaoHeadPosition">
        <el-row type="flex" style="height:80%;display:flex;align-items: flex-end">
          <el-col :xs="3" :sm="3" :md="3" class="imgCol">
            <img v-bind:src="backIcon" class="backSize" @click="back" />
          </el-col>
          <el-col :xs="6" :sm="6" :md="6" :offset="6" class="imgCol">
            <span class="titleSize">我的课表</span>
          </el-col>
        </el-row>
      </el-header>
      <el-main id="keBiaoMainPosition"> 
        <Calendar
        
          v-on:choseDay="clickDay"
          v-on:changeMonth="changeDate"
          :markDate=arr
        ></Calendar>
        <el-row type="flex" style="margin-top:5%">
          <el-col :xs="2" :sm="2" :md="2" :offset="3" class="imgCol">
            <div class="point"></div>
          </el-col>
          <el-col  :xs="18" :sm="18" :md="18" :offset="0">
            <span class="keBiaoWords">最近一次培训在<span class="keBiaoKey">2</span>天后</span>
          </el-col>
        </el-row>
      </el-main>
    </el-container>
  </div>
</template>
<script>
import backIcon from '../../assets/img/mine/geRenZhongXin/back.png'
import Calendar from 'vue-calendar-component';
export default {
    components: {
       Calendar
    },
    data(){
        return{
            backIcon:backIcon,
            normalHeight:document.documentElement.clientHeight,
           arr:["2019/07/08","2019/07/09","2019/07/10","2019/07/11"]
       

        }
    },
    mounted(){
        var normalHeight=sessionStorage.getItem('normalHeight');

        var bg = document.getElementById("background");
       // normalHeight=document.documentElement.clientHeight;
        console.log("height:"+normalHeight);
        bg.style.height = normalHeight+"px";
        bg.style.backgroundColor = "#FFFFFF"
        bg.style.margin = "0px";

        var head=document.getElementById("keBiaoHeadPosition");
        var headHeight=normalHeight/30 *4 ;
        console.log("headHeight:"+headHeight);
        head.style.height=headHeight+"px";

    },
    /** 
    created(){
      this.plusReady();
    },*/
    methods:{
        back(){
          console.log("back:");
          this.$router.go(-1);
        },
        change (val, label) {
          console.log('change', val, label)
        },
        clickDay(data) {
          console.log(data); //选中某天
        },
        changeDate(data) {
          console.log(data); //左右点击切换月份
    },
    },
}
</script>
<style>
.el-main {
    padding: 0px ;
}
#keBiaoHeadPosition {
  background-color: #53cdf5;
}
.imgCol {
  display: flex;
  align-items: center;
  justify-content: center;
}
.wh_content_all[data-v-2ebcbc83] {
    background-color: #fff !important;
}
.wh_content_item[data-v-2ebcbc83], wh_content_item_tag[data-v-2ebcbc83] {
    color: #707070 !important;
}
.wh_top_changge li[data-v-2ebcbc83] {
      color: #707070 !important;
}
.wh_jiantou1[data-v-2ebcbc83] {
    border-top: 2px solid #707070 !important;
    border-left: 2px solid #707070 !important;
}
.wh_jiantou2[data-v-2ebcbc83] {
    border-top: 2px solid #707070 !important;
    border-right: 2px solid #707070 !important;
}
.wh_content_item .wh_isToday[data-v-2ebcbc83] {
    background: #fff !important;
}
.wh_content_item>.wh_isMark[data-v-2ebcbc83] {
    background: #53cdf5 !important;
}
.wh_item_date[data-v-2ebcbc83], .wh_top_tag[data-v-2ebcbc83] {
    width: 30px !important;
    height: 30px !important;
    line-height: 30px !important;
}
.wh_content_item .wh_chose_day[data-v-2ebcbc83] {
    background: #fff !important;
    border: #53cdf5 1px solid !important;
}

.keBiaoWords{
  color: #707070;
  font-size: 1.125em;
}
.keBiaoKey{
  margin: 0 5px 0 5px;
  color: red;
}
.backSize{
    height: 26px;
}
.titleSize{
    font-size:1.125em;
    color:#ffffff
}
@media screen and (max-height: 600px){
  .backSize{
      height: 22px;
  }
  .titleSize{
      font-size: 1em;
  }
}
/**
li {
    width: 20px;
    height: 20px;
    background-color: #fff !important; 
    border-radius: 50%;
    margin: 5px;
}*/
.point{
 width: 10px !important;      
 height: 10px !important;      
 background-color:#53cdf5 !important;      
 border-radius: 50% !important;      
 -moz-border-radius: 50% !important;      
 -webkit-border-radius: 50% !important; 
  box-shadow: none;
}
</style>
